<template>
  <div class="app">
    <div :style="{ fontSize: fontSize + 'px' }">App</div>
    <div class="text">App</div>
    <input type="text" v-model="fontSize" />
  </div>
</template>

<script lang="ts">
/*
  动态样式：
    动态class
      :class="xxx"
      :class="[xxx]"
      :class="{ xxx: true }"
    动态style
      :style="{ xxx: xxx }"
    v-bind
      xxx: v-bind(xxx)

  样式作用域：scoped
    让样式只对当前组件生效，（对子组件根标签生效）

  lang="scss" 使用css预处理器，但是要下载相关的依赖 pnpm add sass -D

  深度样式选择器
    .a :deep(.b) {

    }
*/
export default {
  name: "App",
  data() {
    return {
      fontSize: "",
    };
  },
  computed: {
    formatFontSize() {
      return this.fontSize + "px";
    },
  },
};
</script>

<style scoped lang="scss">
:root {
  /* css 定义样式变量的语法 */
  /* 定义变量的影响范围：当前元素及其子元素 */
  --primary-color: pink;
}

.text {
  font-size: v-bind(formatFontSize);
}
</style>
